<template>
  <zm-form :model="item" ref="form">
    <div class="df-center">
      <!-- <div><el-button type="primary" @click="validate"></el-button></div> -->
      <zm-form-item
        prop="date"
        :rules="itemRule"
        class="mr10"
        v-if="timeType === '3'"
      >
        <zm-date-picker type="date" v-model="item.date"> </zm-date-picker>
      </zm-form-item>
      <zm-form-item
        prop="year"
        :rules="itemRule"
        class="mr10"
        v-if="timeType === '4'"
      >
        <zm-date-picker
          v-model="item.year"
          type="year"
          value-format="yyyy"
          placeholder="选择年"
        >
        </zm-date-picker>
      </zm-form-item>
      <zm-form-item
        prop="holidayId"
        :rules="itemRule"
        class="mr10"
        v-if="timeType === '4'"
      >
        <zm-data-select
          v-model="item.holidayId"
          filterable
          :list="holidayList"
          label-name="name"
          value-key="value"
          placeholder="选择节假日"
          @change="setHolidayName"
        ></zm-data-select>
      </zm-form-item>
      <!-- 指定日期区间 -->
      <zm-form-item
        prop="startDate"
        :rules="itemRule"
        class="mr10"
        v-if="timeType === '1'"
      >
        <zm-date-picker
          :target="item"
          start-key="startDate"
          end-key="endDate"
        ></zm-date-picker>
      </zm-form-item>
      <zm-form-item prop="startTime" :rules="itemRule" class="mr10">
        <zm-time-picker
          is-range
          :target="item"
          start-key="startTime"
          end-key="endTime"
        ></zm-time-picker>
      </zm-form-item>
      <slot></slot>
    </div>
  </zm-form>
</template>

<script>
import { timeTypeList, timeModel } from './const'
export default {
  name: 'TimeItem',
  components: {},
  model: {
    prop: 'item',
    event: 'change'
  },
  props: {
    item: {
      type: Object,
      default: () => {
        return { ...JSON.parse(timeModel) }
      }
    },
    timeType: {
      type: String,
      default: '1'
    },
    holidayList: {
      type: Array,
      default: () => {
        return []
      }
    }
  },
  data () {
    return {
      itemRule: [
        {
          required: true,
          message: '必填',
          trigger: 'blur'
        }
      ]
    }
  },
  computed: {},
  watch: {},
  created () {},
  methods: {
    validate () {
      return this.$refs.form.validate()
    },
    setHolidayName (val) {
      if (val) {
        const res = this.holidayList.filter(item => item.value === val)
        this.$emit('set-holiday-name', res[0].name)
      }
    }
  }
}
</script>
